@import "globals";

.loginContainer {
  background: url('../assets/img/login-background.jpg') no-repeat;
  background-size: cover;
}

.logo {
  height: 30%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: $mainGreen;
  .title {
    font-size: px2rem(50);
    padding: 10px 0;
  }
  h3 {
    font-size: px2rem(14);
    font-weight: 200;
    letter-spacing: 4px;
  }
}

.loginForm {
  height: 64%;
  justify-content: flex-start;
  box-sizing: border-box;
  padding-top: px2rem(60);
}

.loginForm div {
  border-bottom: 1px solid rgb(213, 213, 213);
  width: 80%;
  font-size: px2rem(16);
  padding: 20px 0 12px;
  position: relative;
  &:last-of-type {
    border-bottom: none;
    padding-top: 32px;
  }
  input {
    border: none;
    width: 70%;
    background: transparent;
  }
  :global(.iconfont) {
    position: absolute;
    color: $lightGray;
    right: 0;
  }

  :global(.username ~ .icon-guanbi) {
    right: 0 !important;
  }
  :global(.password ~ .icon-guanbi) {
    right: 40px !important;
  }
  :global(.password ~ .icon-mima-yanjing-guanbi),
  :global(.password ~ .icon-xianshimima1) {
    right: 0;
  }
  .submit {
    letter-spacing: 4px;
    width: 100%;
    padding: 10px 0;
    color: white;
    border: none;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 1rem;
    display: block;
    text-align: center;
    &:global(.gray) {
      background: #d3d4dc;
    }

    &:global(.green) {
      background: $mainGreen;
    }
  }
}

footer {
  height: 6%;
  text-align: center;
  font-size: px2rem(12);
  color: $lightGray;
  letter-spacing: 4px;
  font-weight: 200;
}
